<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div><input type="checkbox" v-model="isAllCheck" />全选</div>
        <div v-for="item in list2"><input type="checkbox" v-model="item.checked">名称：{{item.name}},个数：{{item.num
            }},价格：{{item.price}}
            <div>总价：{{item.total}}</div>
        </div>
        <h1><input type="checkbox" v-model="isAllCheck"> 总价：{{totalPrice}}</h1>
    </div>
</body>
<script src="vue.js"></script>
<script>
    const { createApp, ref, reactive, computed } = Vue;
    createApp({
        setup() {
            let list = ref([{
                name: "商品1",
                num: 3,
                price: 800,
                checked: false
            }, {
                name: "商品2",
                num: 3,
                price: 800,
                checked: false
            }])

            let list2 = computed(() => {
                return list.value.map(v => {
                    v.total = v.price * v.num
                    return v

                })
            })

            const totalPrice = computed(() => {
                let total = 0;


                list2.value.forEach(function (v) {
                    total += v.total
                })
                return total
            })

            const isAllCheck = computed({
                get() {
                    return list2.value.every(v => v.checked)
                },
                set(val) {
                    if (val) {
                        list2.value.forEach(v => {
                            v.checked = true
                        })
                    } else {
                        list2.value.forEach(v => {
                            v.checked = false
                        })
                    }
                }
            })
            return {
                list,
                list2,
                isAllCheck,
                totalPrice

            }
        }
    }).mount("#app")
</script>

</html>